<!-- 通知 -->
<style lang="scss">
    .pro-crm-home-message-notice{
        .list-item{
            padding:10px 0;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom:0;
                left:2%;
                height:1px;
                width:98%;
                background: #f3f3f3;
            }
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #808080;
                cursor: pointer;
                line-height: 24px;
                padding-left: 20px;
                position: relative;
                &::before{
                    content: "";
                    width:6px;
                    height:6px;
                    border-radius: 100%;
                    background: #e4e4e4;
                    position: absolute;
                    left:5px;
                    top:10px;
                }
                &.unread{
                    color:#333333;
                }
                &.unread::before{
                    background: #D24D57;
                }
                &:hover{
                    color:#2f6bcf;
                }
                .date{
                    position: absolute;
                    right: 0;
                    color: #868686;
                    font-size: 12px;
                }
            }
            .content{
                font-size: 12px;
                line-height: 26px;
                color: #868686;
                padding: 0 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .actions{
                position: absolute;
                right: 5px;
                bottom: 10px;
                i{
                    color: #cccccc;
                    cursor: pointer;
                    margin:0 5px;
                    font-size: 12px;
                    &.edit{
                        font-size: 14px;
                    }
                    &:hover{
                        color:#2f6bcf;
                    }
                }
            }
        }
    }
</style>
<template>
  <div>
    <item-view
      ref="list"
      :total-count="totalCount"
      :loading="loading"
      :visible="visible"
      :title="$t('_message.notice')"
      @buildData="buildData"
      @readAll="readAll"
      :unreadCount="unreadCount"
      v-show="visible"
      class="pro-crm-home-message-notice"
    >
      <el-dropdown
        slot="searchType"
        @command="changeMsgType"
        trigger="click"
        placement="bottom"
      >
        <span class="el-dropdown-link">
          {{ activeMsgText }}<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item) in msgTypes"
            :key="item"
            :command="item.code"
          >
            {{ item.text }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div
        slot="listitem"
        v-for="(item,index) in data"
        :key="item"
        class="list-item"
      >
        <div
          :class="{'unread':item.USERMSG_YD != '1'}"
          @click="showInfo(item,index)"
          class="title"
        >
          <span v-html="formatKeyword(item.USERMSG_BT)" />
          <span class="date"><span v-html="formatKeyword(item.SY_CREATEUSERNAME)" /> {{ formatTime(item.SY_CREATETIME) }}</span>
        </div>
        <div
          v-html="item.USERMSG_NR"
          @click="showInfo(item,index,true)"
          class="content"
        />
        <!-- <div class="actions">
                    <i class="remove jeicon jeicon-error"></i>
                    <i class="edit jeicon jeicon-edit"></i>
                </div> -->
      </div>
    </item-view>
    <log-info ref="loginfo" />
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import ItemView from './item_view.vue';
import Util from '../../util/util.js';
import LogInfo from '../log/log_info.vue';
import spe from '../../assets/lang/message/speNationalList';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [
      { name: '_message', data: require('./../../assets/lang/message/zh') },
      { name: '_bubble', data: require('./../../assets/lang/bubble/zh') },
      { name: '_log', data: require('./../../assets/lang/log/zh') },
    ]), // 中文语言包
    en: getLang('en', [
      { name: '_message', data: require('./../../assets/lang/message/en') },
      { name: '_bubble', data: require('./../../assets/lang/bubble/en') },
      { name: '_log', data: require('./../../assets/lang/log/en') },
    ]), // 英文语言包
  },
});
export default {
  name: 'MessageNotice',
  components: { ItemView, LogInfo },
  i18n,
  data() {
    return {
      activeMsgType: 'all',
      loading: true,
      visible: false,
      data: [],
      unreadCount: 0,
      totalCount: 0, // 总条数，绑定分页条
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  computed: {
    msgTypes() {
      const items = JE.getDicItems('JE_CORE_MSGTYPE');
      const _items = [{ code: 'all', text: this.lang == 'zh_CN' ? '全部' : 'ALL' }]; const excloud = ['PZ', 'BUBBLE', 'WF', 'TRANSACTION'];
      Ext.each(items, (item) => {
        if (excloud.indexOf(item.code) == -1) {
          _items.push(item);
        }
      });
      return _items;
    },
    activeMsgText() {
      let text = ''; const activeType = this.activeMsgType;
      Ext.each(this.msgTypes, (type) => {
        if (activeType == type.code) {
          text = type.text;
          return false;
        }
      });
      return text;
    },

  },
  mounted() {
    const me = this;
    me.$nextTick(() => {
      me.getList().load();
    });
  },
  methods: {
    changeMsgType(code) {
      this.activeMsgType = code;
      this.getList().load();
    },
    setVisible(visible) {
      this.visible = visible;
    },
    getList() {
      return this.$refs.list;
    },
    formatTime(time) {
      return Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'm/d H:i');
    },
    getParams() {
      const params = this.getList().getParams();
      params.tableCode = 'JE_SYS_USERMSG';
      params.orderSql = 'ORDER BY SY_CREATETIME DESC';
      params.whereSql = `AND USERMSG_JSR_ID='${JE.USER.userId}'`;
      params.j_query = {
        custom: [{ type: '=', code: 'USERMSG_JSR_ID', value: JE.USER.userId }],
        order: [{ type: 'DESC', code: 'SY_CREATETIME' }],
      };

      // 消息类型
      const types = [];
      if (this.activeMsgType == 'all') {
        Ext.each(this.msgTypes, (type) => {
          type.code != 'all' && types.push(type.code);
        });
      } else {
        types.push(this.activeMsgType);
      }
      if (JE.isNotEmpty(types)) {
        params.whereSql += ` AND USERMSG_MSGTYPE_CODE IN ('${types.join("','")}')`;
        params.j_query.custom.push(
          { type: 'in', code: 'USERMSG_MSGTYPE_CODE', value: `('${types.join("','")}')` },
        );
      }
      // 读取状态
      if (JE.isNotEmpty(params.readStatus) && params.readStatus != 'ALL') {
        params.whereSql += ` AND USERMSG_YD = '${params.readStatus == 'YD' ? '1' : '0'}'`;
        params.j_query.custom.push(
          { type: '=', code: 'USERMSG_YD', value: params.readStatus == 'YD' ? '1' : '0' },
        );
      }
      // 关键字
      if (JE.isNotEmpty(params.keyword)) {
        params.whereSql += ` AND (USERMSG_BT like '%${params.keyword}%'  OR SY_CREATEUSERNAME like '%${params.keyword}%'  OR USERMSG_NR like '%${params.keyword}%')`;
        params.j_query.custom.push(
          {
            type: 'and',
            value: [
              { type: 'like', code: 'USERMSG_BT', value: `%${params.keyword}%` },
              {
                type: 'like', code: 'SY_CREATEUSERNAME', value: `%${params.keyword}%`, cn: 'or',
              },
              {
                type: 'like', code: 'USERMSG_NR', value: `%${params.keyword}%`, cn: 'or',
              },
            ],
          },
        );
      }
      // 时间
      if (JE.isNotEmpty(params.startTime)) {
        params.whereSql += ` AND (USERMSG_JSSJ>'${params.startTime}' AND USERMSG_JSSJ<'${params.endTime}')`;
        params.j_query.custom.push(
          {
            type: 'and',
            value: [
              { type: '>', code: 'USERMSG_JSSJ', value: params.startTime },
              { type: '<', code: 'USERMSG_JSSJ', value: params.endTime },
            ],
          },
        );
      }
      params.j_query = Ext.encode(params.j_query);
      return params;
    },
    formatKeyword(text) {
      const { keyword } = this.getList();
      return Util.formatKeyword(text, keyword);
    },
    refresh() {
      this.getList().load();
    },
    /**
             * 加载数据
             */
    buildData(callback) {
      const me = this;
      me.loading = true;
      JE.ajax({
        url: '/je/portal/homePortal/loadUserMsg',
        params: me.getParams(),
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          me.data = data.rows;
          me.totalCount = data.totalCount;
          callback(data);
          me.$emit('doact', 'refreshBadge', {
            type: 'MSG',
            num: true,
            numObj: {
              msgCount: data.noReadCount,
            },
          });
          me.unreadCount = data.noReadCount;
          me.loading = false;
        },
      });
    },
    /**
             * 全部已读
             */
    readAll() {
      const me = this;
      JE.ajax({
        url: '/je/portal/homePortal/readAllUserMsg',
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          if (data.success) {
            me.getList().load();
            JE.msg(me.lang == 'zh_CN' ? '设置成功！' : 'Setup successful!');
          }
        },
      });
    },
    childRefresh() {
      this.$refs.list._buildData();
    },
    /**
             * 查看详情
             */
    showInfo(item, index, flag) {
      const me = this;
      // 查看日志
      if (item.USERMSG_MSGTYPE_CODE == 'RZ') {
        const info = me.$refs.loginfo;
        const obj = JE.ajax({
          url: JE.getUrlMaps('je.core.getInfoById'), // 获得数据的地址
          params: {
            tableCode: 'JE_CIRCLE_REPORT',
            pkValue: item.USERMSG_YW_ID,
          },
        });
        if (obj.success != false) {
          // info.data = obj;
          // info.setVisible(true);
          info.setVisible(true, obj.JE_CIRCLE_REPORT_ID);
          info.noticeRefresh();
        } else {
          JE.msg(me.lang == 'zh_CN' ? '日志不存在！' : 'The log does not exist!');
          me.childRefresh();
        }
      } else if (!flag) {
        const win = JE.win({
          title: me.lang == 'zh_CN' ? '消息查看' : 'Message view',
          width: 750,
          height: 450,
          autoShow: true,
          buttons: [{ text: me.lang == 'zh_CN' ? '关闭' : 'Close', cls: 'JEPLUS_B_L10', handler(btn) { btn.up('window').close(); } }],
          buttonAlign: 'center',
          html: `<div style="line-height: 2;font-size: 16px;padding: 10px 20px;text-indent: 24px;">${item.USERMSG_NR}</div>`,
        });
        win.on('close', () => {
          me.childRefresh();
        });
      }
      if (item.USERMSG_YD == '0') {
        Util.doReadMark('notice', item.JE_SYS_USERMSG_ID);
        item.USERMSG_YD = '1';
        this.$set(this.data, index, item);
      }
    },
    getEn(cn) {
      if (!cn) return;
      if (this.$i18n.locale == 'zh_CN') return cn;
      return spe[cn] || cn;
    },
  },
};
</script>
